<template>
	<ul>
		<router-link tag = "li" v-for = "item of list" :key = "item.id" :to = "'/read/'+item.item_id">
			<h3>- {{item.tag_list.length ? item.tag_list[0].title : "阅读"}} -</h3>
			<h2>{{item.title}}</h2>
			<p class = "author">文 / {{item.author.user_name}}</p>
			<div class = "imgWrap">
				<img :src="item.img_url" alt="">
			</div>
			<p class = "forward">{{item.forward}}</p>
			<p class = "post_date">{{item.post_date.substr(0,10)}}</p>
		</router-link>
	</ul>
</template>

<script>
import axios from 'axios'
export default {
	name : 'readMain',
	data () {
		return {
			list :　[]
		}
	},
	methods : {
		getDataList () {
			axios.get('http://v3.wufazhuce.com:8000/api/channel/reading/more/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then(this.getDataListSucc)
		},
		getDataListSucc (res) {
			if(res.data.res === 0 && res.data.data) {
				this.list = res.data.data;
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getDataList();
	}
}
</script>

<style lang = "less" scoped>
	ul {
		margin-top:.88rem;
		background:#F6F6F6;
		li {
			background: #fff;
			padding:0 .4rem;
			color:rgba(0,0,0,.6);
			margin-bottom:.2rem;
			h3 {
				text-align: center;
				font-size:.3rem;
				line-height:1.4rem;
			}
			h2 {
				font-size:.44rem;
				color:#000;
				font-weight: 500;
			}
			.author {
				line-height:1rem;
				font-size:.32rem;
			}
			.imgWrap {
				width:100%;
				height:0;
				overflow: hidden;
				padding-bottom:59.7%;
				position: relative;
				img {
					position: absolute;
					top:0;
					left:0;
					width:100%;
				}
			}
			.forward {
				font-size:.26rem;
				line-height:.46rem;
				padding-top:.3rem;
			}
			.post_date {
				padding :.4rem 0 ;
			}

		}
	}
</style>